<template>
	<view>
		<view class="add">
			{{formvalue.title}}
			{{formvalue.img}}
			<form @submit="submit">
				<view class="item">
					<input v-model="formvalue.title" type="text" name="title" placeholder="请输入标题">
				</view>
				
				<view class="item">
					<input v-model="formvalue.author" type="text" name="author" placeholder="请输入作者">
				</view>
				
				<view class="item">
					<textarea v-model="formvalue.content" name="content" placeholder="请输入内容"></textarea>
				</view>
				<view class="item"></view>
				<uni-section title="只选择图片" type="line">
							<view class="example-body">
								<uni-file-picker limit="9" title="最多选择9张图片" auto-upload="true" 
								@success="success" size-type="compressed" @progress="progress"
								></uni-file-picker>
							</view>
				</uni-section>
				
				<view class="but">
					<button form-type="submit" type="primary" :disabled="!formvalue.title">提交</button>
					<button form-type="reset" type="warn">重置</button>
				</view>
				
			</form>
			
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				formvalue:{
					title:"",
					author:"",
					content:"",
					img:""
					
				},
				process:"0"
			};
		},
		methods:{
			success(e){
				console.log(e);
				console.log(e.tempFilePaths);
				let img=e.tempFilePaths
				let old = this.formvalue.img
				console.log(old);
				let ne = [...old,...img]
				this.formvalue.img = ne
				console.log(ne);
			},
			progress(e){
				console.log(e.progress);
				this.process = e.process 
			},
			//提交
			submit(e){
				let detail=e.detail.value
				uniCloud.callFunction({
					name:"art_add_row",
					data:{
						api:"submit",
						detail:this.formvalue
					}
				}).then(res=>{
					console.log(res);
					uni.showToast({
						title:"发布成功"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/index/index"
						})
					},700)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.add{
	padding: 30rpx;
	.item{
		padding-bottom: 20rpx;
		
		input{
			
			border-bottom: 1rpx solid #eee;
			height: 80rpx;
			font-size: 47rpx;
			padding: 0 20rpx;
		}
		textarea{
			border-bottom: 1rpx solid #eee;
			padding: 0 20rpx;
			height: 300rpx;
		}
	}
	.but{
		// padding: 20rpx 0;
		margin: 20rpx 50rpx;
		
		button{
			margin: 20rpx;
			
		}
	}
}
</style>
